<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 标题区域 -->
      <div class="title-area">
        <img src="@/assets/logo.png" class="logo" alt="logo">
        <h1 class="title">群兴寿服管理系统</h1>
        <p class="subtitle">尊重生命 | 缅怀故人 | 慎终如始</p>
      </div>

      <!-- 登录表单 -->
      <div class="form-area">
<!--        <el-form-->
<!--            ref="loginForm"-->
<!--            :model="loginForm"-->
<!--            :rules="loginRules"-->
<!--            class="login-form">  -->
          <el-form
            ref="loginForm"
            :model="loginForm"
            class="login-form">
          <el-form-item prop="userName">
            <el-input
                v-model="loginForm.userName"
                prefix-icon="el-icon-user"
                placeholder="请输入用户名"
                clearable>
            </el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
                v-model="loginForm.password"
                prefix-icon="el-icon-lock"
                :type="passwordVisible ? 'text' : 'password'"
                placeholder="请输入密码"
                @keyup.enter.native="handleLogin"
                clearable>
              <i
                  slot="suffix"
                  :class="['el-input__icon', passwordVisible ? 'el-icon-view' : 'el-icon-hide']"
                  @click="passwordVisible = !passwordVisible">
              </i>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-checkbox v-model="rememberMe">记住密码</el-checkbox>
            <el-link type="primary" class="forget-pwd" @click="handleForgetPassword">忘记密码？</el-link>
          </el-form-item>

          <el-form-item>
            <el-button
                :loading="loading"
                type="primary"
                class="login-button"
                @click="handleLogin">
              {{ loading ? '登录中...' : '登录' }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 底部版权信息 -->
      <div class="footer">
        <p>Copyright © 2024 群兴寿服 All Rights Reserved.</p>
      </div>
    </div>
  </div>
</template>

<script src="./login.js" />

<style lang="scss" scoped src="./login.scss" />